<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { devicePage, layDevices, cameraDevicePage, todayImg } from '@/utils/api.js'
import openLayers from '@/components/common/map.vue';
import wml from '@/components/common/wls-model.vue';
import wlsLarge from '@/components/common/wls-large.vue'
import { Search } from '@element-plus/icons-vue';
import img4g from '@/assets/images/4G_anchor_center_center.png'
import img4g2 from '@/assets/images/4Goff_anchor_center_center.png'
const route = useRouter();
const iswl = ref(false);
const wlm = ref([]);
let areaId = '';
let pageNum = '1';
let ccl = ['myrtm01xs', 'myrtm01xs2'];
let svl = 'dayDataNum';
let camera = [], camera2 = [], dayDataNum = [], effectiveRate = [];
const ol = ref(null);
const laydev = ref({});
const activeName = ref('first');
const keywords = ref('');
const input = ref('');
const wslist = ref([]);
const currentPage = ref(1);
const totalElements = ref(0);
const status = ref('');
const iszqzk = ref(true);

const getCache = () => {
    let data = JSON.parse(window.sessionStorage.getItem('Cache'));
    pageNum = data.pageNum;
    currentPage.value = data.currentPage;
    keywords.value = data.keywords;
    activeName.value = data.activeName
    if (activeName.value == 'first') {
        getdevicePage();
    }
    if (activeName.value == 'second') {
        getcameraDevicePage();
    }
    if (activeName.value == 'third') {
        gettodayImg();
    }

    window.sessionStorage.removeItem('Cache')
}

const handleClick = () => {
    pageNum = 1;
    currentPage.value = 1;
    keywords.value = '';
    wslist.value = [];
    if (activeName.value == 'first') {
        getdevicePage();
    }
    if (activeName.value == 'second') {
        getcameraDevicePage();
    }
    if (activeName.value == 'third') {
        gettodayImg();
    }
};

const getFirst = (data) => {
    if (data instanceof Array) {
        return data.length
    }
}

const handleCurrentChange = (val) => {
    pageNum = val;
    if (activeName.value == 'first') {
        getdevicePage();
    }
    if (activeName.value == 'second') {
        getcameraDevicePage();
    }
    if (activeName.value == 'third') {
        gettodayImg();
    }
};

const getdevicePage = async () => {

    let str = '?areaId=' + areaId + '&pageNum=' + pageNum + '&pageSize=10&keywords=' + keywords.value + '&status=' + (status.value == undefined ? '' : status.value)
    let res = await devicePage(str);
    if (res.code == '200') {
        wslist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const getcameraDevicePage = async () => {
    let str = '?areaId=' + areaId + '&pageNum=' + pageNum + '&pageSize=10&keywords=' + keywords.value
    let res = await cameraDevicePage(str);
    if (res.code == '200') {
        wslist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}
const gettodayImg = async () => {
    let str = '?areaId=' + areaId + '&pageNum=' + pageNum + '&pageSize=10&keywords=' + keywords.value
    let res = await todayImg(str);
    if (res.code == '200') {
        wslist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const getlayDevices = async () => {
    let res = await layDevices(areaId)
    if (res.code == '200') {
        ol.value.initmap();
        laydev.value = res.data;
        res.data.deviceList.forEach(e => {
            if (e.type == 0) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "",
                    fillColor: '',
                    offsetY: 24,
                    iconSrc: e.status == 0 ? img4g : img4g2,
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/realTimeMonitoring"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera.push(z);
            }

            if (e.type == 1) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "#1890FF",
                    fillColor: '#FFF',
                    offsetY: 24,
                    radius: 14,
                    iconSrc: "",
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/realTimeMonitoring"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera2.push(z);
            }


            if (e.dayDataNum != null) {
                let z = {
                    id: e.id,
                    cameraEnvirId: e.id,
                    num: e.dayDataNum,
                    path: "/realTimeMonitoring",
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                dayDataNum.push(z)
            }

            if (e.effectiveRate != null) {
                let z = {
                    id: e.id,
                    cameraEnvirId: e.id,
                    num: e.effectiveRate + '%',
                    path: "/realTimeMonitoring",
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                effectiveRate.push(z)
            }

        })
        if (dayDataNum.length > 0) {
            ol.value.addMoreOverlay(dayDataNum);
        }

        if (camera.length > 0) {
            setTimeout(function () {
                ol.value.addGeoJson(camera, 'myrtm01xs');
            }, 500)
        }
        if (camera2.length > 0) {
            setTimeout(function () {
                ol.value.addGeoJson(camera2, 'myrtm01xs2');
            }, 500)
        }
    }
}

const SwitchOverlay = () => {
    if (svl == 'dayDataNum') {
        if (dayDataNum.length > 0) {
            ol.value.addMoreOverlay(dayDataNum);
        }
    }
    if (svl == 'effectiveRate') {
        if (effectiveRate.length > 0) {
            ol.value.addMoreOverlay(effectiveRate);
        }
    }
}

const SwitchRadio = (data) => {
    svl = data;
    if (ccl.indexOf('myrtm01xs') != -1) {
        ol.value.delOverlay();
        setTimeout(function () {
            SwitchOverlay();
        }, 500)
    }
}

const changeCamera = (data) => {
    if (ccl.indexOf(data) == -1) {
        ccl.push(data);
        if (data == 'myrtm01xs') {
            ol.value.addGeoJson(camera, 'myrtm01xs');
            SwitchOverlay()
        } else {
            ol.value.addGeoJson(camera2, 'myrtm01xs2');
        }
    } else {
        ccl.splice(ccl.indexOf(data), 1);
        ol.value.delLayers(data);
        if (data == 'myrtm01xs') {
            ol.value.delOverlay()
        }
    }
}

const scl = () => {
    pageNum = 1;
    currentPage.value = 1;
    wslist.value = [];
    if (activeName.value == 'first') {
        getdevicePage();
    }
    if (activeName.value == 'second') {
        getcameraDevicePage();
    }
    if (activeName.value == 'third') {
        gettodayImg();
    }
}

const rtmd = (name, id) => {
    let Cache = {
        pageNum: pageNum,
        currentPage: currentPage.value,
        keywords: keywords.value,
        activeName: activeName.value
    }
    window.sessionStorage.setItem('Cache', JSON.stringify(Cache));
    route.push({ path: '/realTimeMonitoring/wlsDetails', query: { name: name, id: id } });
}

const goaut = (data) => {
    let Cache = {
        pageNum: pageNum,
        currentPage: currentPage.value,
        keywords: keywords.value,
        activeName: activeName.value
    }
    window.sessionStorage.setItem('Cache', JSON.stringify(Cache));
    let name = '实时相机';
    route.push({ path: '/realTimeMonitoring/wlsauthenticate', query: { name: name, groupId: data.groupId } });
}

const ltm = (type, data) => {
    let params = {
        cameraEnvirId: data.id,
        path: '/realTimeMonitoring',
        type: type,
        lon: data.lon,
        lat: data.lat
    }
    ol.value.locationMap(params);
}

const openLarge = (data) => {
    if (data != null) {
        wlm.value = data;
        iswl.value = true;
    }
};

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    setTimeout(function () {
        if (window.sessionStorage.getItem('Cache') != null) {
            getCache()
        } else {
            getdevicePage();
        }
    }, 500)
    getlayDevices();
});
</script>
<template>
    <open-layers ref="ol" />
    <div class="tzpup" :class="iszqzk ? 'tzph' : 'tzph2'">
        <el-row justify="space-between">
            <el-col :span="13">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                    <el-tab-pane label="实时相机" name="first">实时相机</el-tab-pane>
                    <el-tab-pane label="红外相机" name="second">红外相机</el-tab-pane>
                    <el-tab-pane label="今日照片" name="third">今日照片</el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="11">
                <div class="sqzk">
                    <span v-if="iszqzk" @click.stop="iszqzk = false">
                        收起
                        <el-icon>
                            <ArrowUp />
                        </el-icon>

                    </span>
                    <span v-else @click.stop="iszqzk = true">
                        展开
                        <el-icon>
                            <ArrowDown />
                        </el-icon>

                    </span>
                </div>

            </el-col>
        </el-row>

        <el-row v-if="iszqzk" justify="space-between">

            <el-col :span="11">
                <el-select v-if="activeName == 'first'" v-model="status" @change="getdevicePage" placeholder="选择设备状态"
                    clearable size="large">
                    <el-option label="在线" value="0" />
                    <el-option label="离线" value="1" />
                </el-select>
            </el-col>

            <el-col :span="11">
                <el-input v-model="keywords" style="width: 100%;" size="large" placeholder="搜索相机编号"
                    class="input-with-select">
                    <template #append>
                        <el-button @click.stop="scl" :icon="Search" />
                    </template>
                </el-input>
            </el-col>
        </el-row>

        <br>

        <div v-if="iszqzk" style="width: 100%;height: calc(100% - 2rem);" class="scol">
            <div v-if="activeName == 'first'" class="wls-list" v-for="(i, index) in wslist " :key="i.id">
                <div class="wls-status wls-online" v-if="i.status == 0">
                    <span>在线</span>
                </div>
                <div class="wls-status wls-off" v-if="i.status == 1">
                    <span>离线</span>
                </div>
                <div class="wls-list-title">
                    <span>相机编号:{{ i.imei }}</span>
                </div>
                <div class="wls-list-item">
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-wangge"></use>
                    </svg>
                    <span class="wls-list-span" title="网格编号">{{ i.oneKmGridNum }}</span>
                    <div class="wls-list-s"></div>
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-haiba"></use>
                    </svg>
                    <span class="wls-list-span" title="海拔">{{ i.altitude }}m</span>
                    <div class="wls-list-s"></div>
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-biaozhu"></use>
                    </svg>
                    <span class="wls-list-span" style="width: 2rem;">{{ i.label == null ? '暂无标签' : i.label }}</span>
                </div>
                <div class="wls-list-item wlsli">
                    <div class="wls-list-item-l" v-if="i.speciesNames == ''">
                        <span>空照片</span>
                    </div>
                    <div class="wls-list-item-l" v-else>
                        <span v-for="im in i.speciesNames.split(',')">{{ im }}</span>
                    </div>
                    <div class="wls-list-item-r">
                        <span>{{ i.todayMediaNum }}张</span>
                    </div>
                </div>
                <div style="height: 1px;width: 100%;background-color: #DCDFE6;"></div>
                <div class="wls-list-item" style=" justify-content: space-between; margin: 0.16rem 0 0 0;">
                    <div class="wls-list-item-2">
                        <svg class="wls-icon" aria-hidden="true">
                            <use xlink:href="#icon-jinrizhaopianshuliang"></use>
                        </svg>
                        <span class="wls-list-span">{{ i.todayMediaNum }}张</span>
                        <div class="wls-list-s"></div>
                        <svg class="wls-icon" aria-hidden="true">
                            <use xlink:href="#icon-zongzhaopianshuliang"></use>
                        </svg>
                        <span class="wls-list-span">{{ i.totalMediaNum }}张</span>
                    </div>
                    <div class="wls-list-item-2">
                        <i style="color: var(--wls-color);" class="icon iconfont icon-dingwei"></i>
                        <span class="wls-list-span wlsc" @click.stop="ltm(0, i)"
                            style="margin-right: 0.24rem;">定位</span>
                        <i style="color: var(--wls-color);" class="icon iconfont icon-chakanxiangqing"></i>
                        <span @click.stop="rtmd('实时相机', i.id)" class="wls-list-span wlsc">查看详情</span>
                    </div>

                </div>
            </div>


            <div v-if="activeName == 'second'" class="wls-list" v-for="(i, index) in wslist" :key="i.id">
                <div class="wls-list-title">
                    <span>卡编号:{{ i.cameraCardId }}</span>
                </div>
                <div class="wls-list-item">
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-wangge"></use>
                    </svg>
                    <span class="wls-list-span">{{ i.oneKmGridNum }}</span>
                    <div class="wls-list-s"></div>
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-haiba"></use>
                    </svg>
                    <span class="wls-list-span">{{ i.altitude }}m</span>
                    <div class="wls-list-s"></div>
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-biaozhu"></use>
                    </svg>
                    <span class="wls-list-span" style="width: 2rem;">{{ i.label }}</span>
                </div>
                <div class="wls-list-item">
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-busheshijian"></use>
                    </svg>
                    <span class="wls-list-span">{{ i.layTime }}</span>
                    <div class="wls-list-s"></div>
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-busheshijian"></use>
                    </svg>
                    <span class="wls-list-span">{{ i.planRecovDate }}</span>
                </div>
                <div style="height: 1px;width: 100%;background-color: #DCDFE6;"></div>
                <div class="wls-list-item" style="justify-content: flex-end;margin: 0.16rem 0 0 0;">
                    <!-- <svg class="wls-icon" aria-hidden="true">
                    <use xlink:href="#icon-dingwei"></use>
                </svg> -->
                    <i style="color: var(--wls-color);" class="icon iconfont icon-dingwei"></i>
                    <span class="wls-list-span wlsc" @click.stop="ltm(1, i)" style="margin-right: 0.24rem;">定位</span>
                    <!-- <svg class="wls-icon" aria-hidden="true">
                    <use xlink:href="#icon-chakanxiangqing"></use>
                </svg> -->
                    <i style="color: var(--wls-color);" class="icon iconfont icon-chakanxiangqing"></i>
                    <span @click.stop="rtmd('红外相机', i.id)" class="wls-list-span wlsc">查看详情</span>
                </div>
            </div>

            <!-- <transition-group name="fade" appear> -->
            <div v-if="activeName == 'third'" class="wls-list" v-for="(i, index) in wslist" :key="i.id">
                <div class="wls-list-title">
                    <div style="display: flex;align-items: center;">
                        <svg class="wls-icon" aria-hidden="true" style="width: 0.3rem;height: 0.3rem;">
                            <use xlink:href="#icon-kongzhaopian" v-if="i.identifyResult == null"></use>
                            <use xlink:href="#icon-youwuzhong" v-else></use>
                        </svg>
                        <span style="margin-left: 0.08rem;">{{ i.identifyResult == null ? '空照片' : i.identifyResult
                            }}</span>
                    </div>
                    <span>{{ i.shootingTime }}</span>
                </div>

                <div class="wls-list-img">
                    <div class="wls-list-img-l" @click.stop="openLarge(i.urlList)">
                        <div class="wdcrc-num" style="top:0.08rem;">
                            <i style="margin-right: 0.08rem;" class="icon iconfont icon-zhaopian"></i>
                            <span>{{ getFirst(i.urlList) }}张</span>
                        </div>
                        <video
                            v-if="$wlsf.filiv((i.urlList instanceof Array) ? i.urlList[0] : false) == 4 && (i.urlList instanceof Array)"
                            :src="i.urlList[0]" alt=""></video>
                        <img v-else :src="(i.urlList instanceof Array) ? i.urlList[0] : ''" alt="">
                    </div>
                    <div class="wls-list-img-r">
                        <div class="wls-list-img-r-t">
                            <div><span>相机编号</span></div>
                            <div><span>{{ i.imei }}</span></div>
                        </div>
                        <div class="wls-list-img-r-t">
                            <div><span>相机标注</span></div>
                            <div><span>{{ i.label }}</span></div>
                        </div>
                        <div class="wls-list-img-r-t">
                            <div><span>所在网格</span></div>
                            <div><span>{{ i.oneKmGridNum }}</span></div>
                        </div>
                        <div class="wls-list-img-r-c">
                            <div>
                                <!-- <svg class="wls-icon" aria-hidden="true">
                                <use xlink:href="#icon-dingwei"></use>
                            </svg> -->
                                <i style="color: var(--wls-color);" class="icon iconfont icon-dingwei"></i>
                                <span class="wls-list-span wlsc" @click.stop="ltm(0, i)"
                                    style="margin-right: 0.24rem;">定位</span>
                            </div>
                            <div @click.stop="goaut(i)">
                                <!-- <svg class="wls-icon" aria-hidden="true">
                                <use xlink:href="#icon-qianwangjianding"></use>
                            </svg> -->
                                <i style="color: var(--wls-color);" class="icon iconfont icon-qianwangjianding"></i>
                                <span class="wls-list-span wlsc" style="margin-right: 0.24rem;">前往鉴定</span>
                            </div>
                            <div @click.stop="rtmd('实时相机', i.id)">
                                <!-- <svg class="wls-icon" aria-hidden="true">
                                <use xlink:href="#icon-chakanxiangqing"></use>
                            </svg> -->
                                <i style="color: var(--wls-color);" class="icon iconfont icon-chakanxiangqing"></i>
                                <span class="wls-list-span wlsc" style="margin-right: 0.24rem;">查看详情</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <!-- </transition-group> -->
        <el-pagination v-if="iszqzk" v-model:current-page="currentPage" :page-size="10" :pager-count="5" :small="true"
            :disabled="false" background layout="total, prev, pager, next, jumper" :total="totalElements"
            @current-change="handleCurrentChange" />
    </div>

    <div class="camera-wls">
        <div class="camera-wls-o">
            <div>
                <img style="width: 0.2rem;height: 0.2rem;" :src="img4g" alt="">
                <span style="margin-left: 0.08rem;">实时相机</span>
            </div>
            <div>
                <span style="margin-right: 0.04rem;">{{ laydev.realTimeDeviceSum }}台</span>
                <input type="checkbox" @change="changeCamera('myrtm01xs')" :checked="true">
            </div>
        </div>

        <div class="camera-wls-o">
            <div style="flex: 1;" class="cwobf">
                <span>在线(台)</span><span style="margin-left: 0.08rem;">{{ laydev.onLineSum }}</span>
            </div>
            <div style="flex: 1;" class="cwof">
                <span>离线(台)</span><span style="margin-left: 0.08rem;">{{ laydev.offLineSum }}</span>
            </div>
        </div>

        <div class="camera-wls-o">
            <div>
                <img style="width: 0.2rem;height: 0.2rem;" src="/src/assets/images/infraredcamera.png" alt="">
                <span style="margin-left: 0.08rem;">红外相机</span>
            </div>
            <div>
                <span style="margin-right: 0.04rem;">{{ laydev.cameraSum }}台</span>
                <input type="checkbox" @change="changeCamera('myrtm01xs2')" :checked="true">
            </div>
        </div>

        <div class="camera-wls-o">

            <div class="cwosp">
                <div>
                    <span>显示</span>
                </div>

                <div>
                    <label>
                        <input type="radio" name="option" checked @change="SwitchRadio('dayDataNum')" value="option1">
                        &nbsp;
                        今日照片数量
                    </label>
                </div>
                <div>
                    <label>
                        <input type="radio" name="option" @change="SwitchRadio('effectiveRate')" value="option1">
                        &nbsp;
                        有效率
                    </label>
                </div>
            </div>

        </div>
    </div>

    <wls-large :msg="wlm" v-if="iswl" @closeLarge="iswl = false" />
</template>
<style scoped>
.wls-list {
    width: 100%;
    padding: .16rem;
    position: relative;
    margin-bottom: 0.24rem;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(220, 223, 230, 0.80);
    cursor: pointer;
}

.wls-status {
    width: 0.6rem;
    height: .26rem;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 4px;
}

.wls-off {
    background: #F84848;
}

.wls-online {
    background-color: #0AD0A1;
}

.wls-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 0.16rem;
}

.wls-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    color: #606266;
    margin-bottom: 0.08rem;
    overflow: hidden;
}

.wls-list-span {
    display: inline-block;
    margin-left: 0.08rem;
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wls-list-s {
    width: 1px;
    height: 0.18rem;
    margin: 0 .24rem;
    background-color: #DCDFE6;
}

.wlsli {
    justify-content: space-between;
}


.wls-list-item-l {
    flex: 8;
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wlsli span {
    display: inline-block;
    padding: 0.04rem 0.08rem;
    border-radius: 4px;
    background: rgba(220, 223, 230, 0.50);
    margin-right: .08rem;
    color: #606266;
}

.wls-list-item-r {
    flex: 2;
    text-align: right;
}

.wlsc {
    color: var(--wls-color);
    text-decoration: underline;
}

.wls-list-img {
    width: 100%;
    height: 1.5rem;
    display: flex;
}

.wls-list-img-l {
    width: 2rem;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right-color: #000;
}

.wls-list-img-l img {
    width: 100%;
    height: 100%;
}

.wls-list-img-l video {
    max-width: 100%;
    max-height: 100%;
}

.wls-list-img-r {
    width: calc(100% - 2.16rem);
    height: 100%;
    margin-left: 0.16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wls-list-img-r-t {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0.08rem;
}

.wls-list-img-r-t>div:nth-child(1) {
    width: 1.12rem;
    height: 0.3rem;
    border-radius: 4px;
    color: #606266;
    margin-right: 0.08rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F7FA;
}

.wls-list-img-r-t>div:nth-child(2) {
    width: calc(100% - 1.4rem);
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wls-list-img-r-c {
    width: 100%;
    margin-top: 0.08rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wls-list-img-r-c>div {
    display: flex;
    align-items: center;
}

.camera-wls {
    width: 3rem;
    padding: 0.16rem;
    position: absolute;
    left: .16rem;
    bottom: 0.64rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.50);
    cursor: pointer;
    overflow: hidden;
}

.camera-wls-o {
    height: .4rem;
    margin-bottom: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.camera-wls-o>div {
    color: #fff;
    display: flex;
    align-items: center;

}

.cwobf {
    height: 100%;
    padding-left: 0.1rem;
    margin-right: 0.16rem;
    border-radius: 4px;
    border: 1px solid #387BFF;
    background: rgba(56, 123, 255, 0.30);
}

.cwof {
    height: 100%;
    padding-left: 0.1rem;
    border-radius: 4px;
    border: 1px solid #F84848;
    background: rgba(248, 72, 72, 0.30);
}

.cwosp {
    width: 100%;
    justify-content: space-between;
}

.cwosp input {
    margin: 0;
    padding: 0;
}

.cwosp label {
    height: 0.3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wls-list-item-2 {
    height: 100%;
    display: flex;
    align-items: center;
}

.sqzk {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #387BFF;
}

.tzpup {
    width: 6rem;
    padding: 0.24rem;
    position: absolute;
    top: 0.16rem;
    right: 0.16rem;
    z-index: 9;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.tzph {
    height: calc(100% - .32rem);
}

.tzph2 {
    height: 1rem;
}
</style>